<template>
  <div class="seller">
    <div class="top">
      <p class="title">供应商分析</p>

      <div class="btn">
       <span>选择采购商 ：</span>

        <el-select v-model="value" placeholder="请选择" size="small">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>

      </div>

    </div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="shippername"
        label="供应商名称">
      </el-table-column>
      <el-table-column
        prop="foreignPortOfLadingCountry"
        label="国家">
      </el-table-column>
      <el-table-column
        prop="weight"
        label="重量（kg）">
      </el-table-column>
      <el-table-column
        prop="pieceCount"
        label="件数">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { usaShippername } from '@/api/automation/customs'
    export default {
        name: "buyer",
        data() {
            return {
                tableData:[],
                options:[],
                value:'全部',
            }
        },
        methods:{
            init() {
                usaShippername(this.value).then(res => {
                    this.options = res.data.data.consignees
                    this.options.push('全部')
                    this.tableData = res.data.data.content
                    this.$emit('update')
                })
            }
        },
        watch:{
          value() {
              this.init()
          }
        }
    }
</script>

<style scoped lang="scss">
  .seller{
    font-size: 13px;
    padding: 15px 25px;
    background-color: white;
    border-radius: 20px;
    margin-bottom: 20px;
  }
  .title{
    color: #2A97F9;
    font-size: 14px;
    font-weight: 600;
  }
  .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
  }
</style>
